<template>
    <Modal v-model="visible" width="750" @on-visible-change="visibleChange">
        <p slot="header">
            <Icon type="logo-buffer" :size="22"/>
            <span style="margin-left: 0.5em">{{title}}</span>
        </p>
      <Card dis-hover style="min-height: 500px">
        <Form ref="objectData" :disabled="!canEdit"  :model="objectData" :rules="ruleValidate" label-colon autocomplete="off"  :label-width="120">
          <Row>
            <Col span="12">
              <FormItem label="客户端ID"  prop="clientId">
                <label>
                  <Input v-model="objectData.clientId" clearable placeholder="请输入客户端ID"></Input>
                </label>
              </FormItem>
            </Col>
			<Col span="12">
			  <FormItem label="客户端名称"  prop="clientId">
			    <label>
			      <Input v-model="objectData.clientName" clearable placeholder="请输入客户端名称"></Input>
			    </label>
			  </FormItem>
			</Col>
            <Col span="12">
              <FormItem label="密钥"  prop="clientSecret">
                <label>
                  <Input v-model="objectData.clientSecret" clearable placeholder="请输入密钥"></Input>
                </label>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="令牌时效"  prop="accessTokenValidity">
                <label>
                  <Input v-model="objectData.accessTokenValidity" clearable placeholder="请输入令牌时效"></Input>
                </label>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="令牌刷新时效"  prop="refreshTokenValidity">
                <label>
                  <Input v-model="objectData.refreshTokenValidity" clearable placeholder="请输入令牌刷新时效"></Input>
                </label>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="自动放行"  prop="autoApprove">
                <RadioGroup v-model="objectData.autoApprove">
                  <Radio label="true">
                    <span>是</span>
                  </Radio>
                  <Radio label="false">
                    <span>否</span>
                  </Radio>
                </RadioGroup>
              </FormItem>
            </Col>
            <Col span="24">
              <FormItem label="授权模式"  prop="description">
                  <CheckboxGroup v-model="authorizedGrantTypes">
                    <Checkbox label="password">密码模式</Checkbox>
                    <Checkbox label="authorization_code">授权码模</Checkbox>
                    <Checkbox label="refresh_token">刷新模式</Checkbox>
                    <Checkbox label="client_credentials">客户端模式</Checkbox>
                    <Checkbox label="implicit">简化模式</Checkbox>
                  </CheckboxGroup>
              </FormItem>
            </Col>
            <Col span="24">
              <FormItem label="回调地址"  prop="description">
                <label>
                  <Input v-model="objectData.webServerRedirectUri" clearable placeholder="请输入岗位描述"></Input>
                </label>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </Card>
        <div slot="footer" v-show="canEdit">
            <Button @click="cancel">取消</Button>
            <Button type="primary" @click="handleSubmit('objectData')">保存</Button>
        </div>
    </Modal>
</template>

<script>
    import {getById,saveOrUpdate} from '@/api/clientApi'
    import {ruleValidate} from '@/views/settings/client/validator/ClientRules'
    import ClientDataProvider from '@/views/settings/data/ClientDataProvider'
    export default {
        name: "client-details",
        components:{
        },
        props:{
          showModal: {
                type: Boolean,
                required: true
            },
          canEdit: {
                type: Boolean,
                required: true
            },
          clientId:{
                type: [Number,String],
                required: false
            },
          title: {
                type: String,
                required: true,
            }
        },
        data () {
            return {
                visible: this.showModal,
                objectData: ClientDataProvider.createClientVo(),
                ruleValidate,
                haveLoadData: false,
                authorizedGrantTypes:[],
            }
        },
        watch: {
            showModal (val) {
                this.visible = val
            },
            visible (val) {
              if (val) {
                if (this.clientId){
                  getById(this.clientId).then(res=>{
                    this.objectData = res
                    if (this.objectData.authorizedGrantTypes){
                      this.authorizedGrantTypes = this.objectData.authorizedGrantTypes.split(',')
                    }
                  })
                }else{
                  this.objectData = ClientDataProvider.createClientVo()
                  this.authorizedGrantTypes=[];
                }
              }
            }
        },
        methods: {
          handleSubmit(name) {
            this.$refs[name].validate((valid) => {
              if (valid) {
                this.objectData.authorizedGrantTypes = this.authorizedGrantTypes.sort().toString();
                let action = 'save';
                if (this.clientId){
                  action= 'update'
                }
                saveOrUpdate(this.objectData,action).then(res=>{
                  this.$Message.success(res)
                  this.visible = false
                  this.$emit('callbackByOk')
                })
              }
            })
          },
          cancel () {
            this.visible = false
          },
          visibleChange(val){
            if (!val){
              this.$emit('callbackByCancel')
            }
          },
        }
    }
</script>

<style scoped>

</style>